import * as React from 'react';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: Infinity,
    },
  },
});

export interface ReactQueryClientProviderProps {
  children: React.ReactNode;
  position?: Parameters<typeof ReactQueryDevtools>['0']['position']; // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
}

const ReactQueryClientProvider: React.FC<ReactQueryClientProviderProps> = function ({ children, position = 'bottom' }) {
  return (
    <QueryClientProvider client={queryClient}>
      {children}
      <ReactQueryDevtools initialIsOpen={false} position={position} />
    </QueryClientProvider>
  );
};
export default ReactQueryClientProvider;
